<template>
	<div class="xnxi">
		<!-- {{list[0].id}} -->
		<div class="mycon" @click="goDetail(list[0].id)">
			<div class="conLeft">
				<img :src="list[0].icon" alt="" class="img" />
			</div>
			<div class="conBox">
				<p class="ti1">{{list[0].title}}</p>
				<p class="ti2">赵小刚发起了一个《{{list[0].ti}}》指定由您处理</p>
			</div>
			<div class="conRight">
				<u-icon name="arrow-right" color="#d1cfd6" size="20"></u-icon>
			</div>
		</div>
		<div class="mycon" @click="goMynos(list[1].children)">
			<div class="conLeft">
				<img :src="list[1].icon" alt="" class="img" />
			</div>
			<div class="conBox">
				<p class="ti1">{{list[1].title}}</p>
				<p class="ti2">{{list[1].ti}}</p>
			</div>
			<div class="conRight">
				<u-icon name="arrow-right" color="#d1cfd6" size="20"></u-icon>
			</div>
		</div>
		<div class="mycon" @click="gszodstd">
			<div class="conLeft">
				<img :src="list[2].icon" alt="" class="img" />
			</div>
			<div class="conBox">
				<p class="ti1">{{list[2].title}}</p>
				<p class="ti2">{{list[2].ti}}</p>
			</div>
			<div class="conRight">
				<u-icon name="arrow-right" color="#d1cfd6" size="20"></u-icon>
			</div>
		</div>
		<div class="mycon" @click="goddbj">
			<div class="conLeft">
				<img :src="list[3].icon" alt="" class="img" />
			</div>
			<div class="conBox">
				<p class="ti1">{{list[3].title}}</p>
				<p class="ti2">{{list[3].ti}}</p>
			</div>
			<div class="conRight">
				<u-icon name="arrow-right" color="#d1cfd6" size="20"></u-icon>
			</div>
		</div>
		<div class="mycon" @click="goccui">
			<div class="conLeft">
				<img :src="list[4].icon" alt="" class="img" />
			</div>
			<div class="conBox">
				<p class="ti1">{{list[4].title}}</p>
				<p class="ti2">{{list[4].ti}}</p>
			</div>
			<div class="conRight">
				<u-icon name="arrow-right" color="#d1cfd6" size="20"></u-icon>
			</div>
		</div>
	</div>
</template>

<script setup>
	// import MessDetail from './messDetail/messDetail.vue'
	import axios from 'axios'
	import {
		onMounted,
		ref
	} from 'vue'

	const list = ref([])
	onMounted(() => {
		console.log('111')
		getData()
	})
	const getData = () => {
		uni.request({
			url: 'http://localhost:3000/xnxi',
			method: 'POST',
			data: {
				// 请求参数
			},
			header: {
				// 请求头
				'content-type': 'application/json'
			},
			success: function(res) {
				console.log('请求成功', res.data);
				const {
					data
				} = res.data
				list.value = data
				// 处理返回的数据
			},
			fail: function(err) {
				console.log('请求失败', err);
				// 处理请求失败
			}
		});
	}

	const goDetail = (ids) => {
		console.log('去往详情')
		console.log(list.value[0].id === ids)
		let res = {}
		list.value.forEach(item => {
			if (item.id === ids) {
				res = item
			}
		})
		console.log(res)
		// console.log(list[0])

		uni.navigateTo({
			url: `/pages/message/messDetail/messDetail?detail=${JSON.stringify(res)}`
		})
	}
	const goMynos = (val)=>{
		console.log(val)
		uni.navigateTo({
			url:`/pages/message/xitsgsgc/xitsgsgc?detail=${JSON.stringify(val)}`
		})
	}
	const goddbj =()=>{
		uni.navigateTo({
			url:'/pages/di/agency/agency'
		})
	}
	const goccui = ()=>{
		uni.navigateTo({
			url:'/pages/message/ccui/ccui'
		})
	}
</script>

<style scoped lang="scss">
	.xnxi {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		background-color: #e4e4e4;

		.mycon {
			// background-color: saddlebrown;
			display: flex;
			align-items: center;
			border-bottom: 1px solid #f2f2f2;
			// justify-content: space-between;
			padding: 20rpx 30rpx;
			background-color: white;

			.conBox {
				width: 85%;
				padding: 0px 5px;
				height: 100%;
				// background-color: salmon;
				font-size: 28rpx;

				.ti1 {
					margin-bottom: 5rpx;
				}

				.ti2 {
					color: #cccccc;
					font-size: 25rpx;
				}
			}

			.img {
				width: 80rpx;
				background-color: #e4e4e4;
				border-radius: 50%;
				height: 80rpx;
				padding: 20rpx;
			}
		}

	}
</style>